<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拉勾网</title>
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./swiper-5.4.5/package/css/swiper.min.css">
    <script src="./swiper-5.4.5/package/js/swiper.min.js"></script>

</head>

<body>
    <div id="box">
        <!-- 头部 -->
        <div class="header">
            <!-- 头部上半部分区域 -->
            <div class="h_top clearfixed">
                <!-- 头部上半部分区域内容 -->
                <div class="topCon main clearFixed">
                    <!--设置子级浮动必须给父级清除浮动-->
                    <div class="conLeft fl">
                        <div class="leftText1 fl">
                            <a href="" class="logo">拉勾</a>
                            <a href="" class="city">全国站</a>
                            <a href="" class="city1">[切换城市]</a>
                        </div>
                        <ul class='ulList clearFixed fl'>
                            <li><a href="">首页</a></li>
                            <li><a href="">公司</a></li>
                            <li><a href="">校园</a></li>
                            <li><a href="">言职</a></li>
                            <li><a href="">课程</a></li>
                        </ul>
                    </div>
                    <div class="conRight fr">
                        <ul class="ulList clearFixed">
                            <li class="li1"><a href="demo.html">
                                    登录</a></li>
                            <li class="li2"><a href="demo.html" class="zhuche"><span>|</span>注册</a></li>
                            <li class="li3"><a href="" class='a3'>
                                    拉勾APP</a>
                                <div class="qrcode">
                                    <img src="./img/qrcode.png" alt="">
                                </div>
                            </li>
                            <li><a href="demo.html">登录企业版</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 头部下半部分区域 -->
            <div class="h_buttom">
                <div class="btnCon main">
                    <div class="btnl fl">
                        <div class="btnlinLeft">
                            <img src="./img/1-1.png" alt="">
                            <div class="btnlinRight">

                            </div>
                            <div class="btnlinText">1234567家公司 | 87951365个职位</div>
                        </div>
                    </div>
                    <div class="btnr fr">
                        <div class="btnBox">
                            <input class="fl text1" type="text" placeholder="请输入手机号">
                            <p class="fl pBtn">
                                <input class="text2" type="text" placeholder="验证码">
                                <a class="aText2" href="">| 获取</a>
                            </p>
                            <input class="fl btnSub" type="button" style="cursor: pointer;"
                                onclick="location.href='demo.html'" value="登录/注册">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 搜索区 -->
        <div class="sear" id="sear">
            <div id="searCon" class="searCon main">
                <div class="searInput clearFixed">
                    <input class='sInput fl' placeholder="搜索职位/公司" type="text">
                    <a class="sA fl" href="">搜索</a>
                </div>
                <ul id="searchList" class="searchList clearFixed">
                    <li><a href="">热门搜索：</a></li>
                    <li><a href="">24小时极速入职</a></li>
                    <li><a href="">名企校招早班车</a></li>
                    <li><a href="">Java面试</a></li>
                    <li><a href="">架构设计</a></li>
                    <li><a href="">数据分析</a></li>
                    <li><a href="">PHP</a></li>
                    <li><a href="">C++</a></li>
                </ul>
            </div>
        </div>

        <!-- 轮播区域 -->
        <div class="banner">
            <div class="banCon main clearFixed">
                <div class="banLeft fl">
                    <ul id="banList" class="banList">
                        
                        <li class="bLi"><a class="aFont" href="">技术 |</a>
                            <a href="">前端</a>
                            <a href="">PHP</a>
                            <a href="">Java</a>
                            <a href="">区块链</a>
                            <a href="">华为</a>
                            <div class="fr">&gt</div>
                            <div id="liCon1">1</div>
                        </li>
                        <li class="bLi"><a class="aFont" href="">产品 |</a>
                            <a href="">产品总监</a>
                            <a href="">产品经理</a>
                            <a href="">数据产品经理</a>
                            <div class="fr">&gt</div>
                            <div id="liCon1">2</div>
                        </li>
                        <li class="bLi"><a class="aFont" href="">设计 |</a>
                            <a href="">UI设计师</a>
                            <a href="">交互设计师</a>
                            <a href="">平面设计师</a>
                            <div class="fr">&gt</div>
                            <div id="liCon1">3</div>
                        </li>
                        <li class="bLi"><a class="aFont" href="">运营 |</a>
                            <a href="">新媒体运营</a>
                            <a href="">编辑</a>
                            <a href="">COO</a>
                            <a href="">运营总监</a>
                            <div class="fr">&gt</div>
                            <div id="liCon1">4</div>
                        </li>
                        <li class="bLi"><a class="aFont" href="">市场 |</a>
                            <a href="">市场营销</a>
                            <a href="">市场推广</a>
                            <a href="">市场策划</a>
                            <div class="fr">&gt</div>
                            <div id="liCon1">5</div>
                        </li>
                        <li class="bLi"><a class="aFont" href="">销售 |</a>
                            <a href="">销售专员</a>
                            <a href="">销售经理</a>
                            <a href="">大客户经理</a>
                            <div class="fr">&gt</div>
                            <div id="liCon1">6</div>
                        </li>
                        <li class="bLi"><a class="aFont" href="">职能|</a>
                            <a href="">HR</a>
                            <a href="">行政</a>
                            <a href="">财务</a>
                            <a href="">审计</a>
                            <div class="fr">&gt</div>
                            <div id="liCon1">7</div>
                        </li>
                        <li class="bLi"><a class="aFont" href="">游戏 |</a>
                            <a href="">小游戏开发</a>
                            <a href="">U3D</a>
                            <a href="">游戏运营</a>
                            <div class="fr">&gt</div>
                            <div id="liCon1">8</div>
                        </li>
                    </ul>
                </div>
                <div class="banRight fr">
                    <div class="banImage">
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide"><img src="./img/aebs.jpg" alt=""></div>
                                <div class="swiper-slide"><img src="./img/xrr.jpg" alt=""></div>
                                <div class="swiper-slide"><img src="./img/ss.jpg" alt=""></div>
                            </div>
                            <!-- 如果需要分页器 -->
                            <div class="swiper-pagination"></div>

                            <!-- 如果需要导航按钮 -->
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 内容区 -->
        <div class="content main">
            <div class="line1">
                <div class="lineTop">
                    <div class="top1">
                        <a href="" class="hot">24HOUR热门</a>
                        <a href="" class="new">最新职位</a>
                    </div>
                    <div class="top2">
                        <span class="fl">?</span>
                        <a href="" class="fl">在过去的24小时,看过最多的岗位在这里</a>
                        <a href="" class="fl">我知道了</a>
                    </div>

                </div>
                <ul class="conUl">
                    <li class="clearFixed">
                        <div class="conBox fl">
                            <p class="job clearFixed ">
                                <span class="jobText fl">前端开发工程师</span>
                                <span class="time btn fl">[10:21发布]</span>
                                <span class="salary fr">15-20k</span>
                            </p>
                            <p class="btn btn2">经验5-10年/大专</p>
                            <p class="clearFixed pBor">
                                <span class="btn fl spa">医疗</span>
                                <span class="btn fl spa">互联网</span>
                            </p>
                            <div class="imgBox clearFixed">
                                <img class="fl" src="./img/wjy.png" alt="">
                                <div class="imgText fl">
                                    <p class="text1">微基因</p>
                                    <p class="text2">互联网/健康/深圳</p>
                                </div>
                            </div>
                        </div>
                        <div class="conBox fl">
                            <p class="job clearFixed ">
                                <span class="jobText fl">前端工程师</span>
                                <span class="time btn fl">[10:21发布]</span><span class="salary fr">10-15k</span>
                            </p>
                            <p class="btn btn2">经验不限年/不限</p>
                            <p class="clearFixed pBor">
                                <span class="btn fl spa">区块链</span>
                                <span class="btn fl spa">Vue</span>
                            </p>
                            <div class="imgBox clearFixed">
                                <img class="fl" src="./img/qt.png" alt="">
                                <div class="imgText fl">
                                    <p class="text1">蜻蜓科技</p>
                                    <p class="text2">区块链/天使轮/深圳</p>
                                </div>
                            </div>
                        </div>
                        <div class="conBox fl">
                            <p class="job clearFixed">
                                <span class="jobText fl">中级前端</span>
                                <span class="time btn fl">[10:21发布]</span>
                                <span class="salary fr">10-20k</span>
                            </p>
                            <p class="btn btn2">经验5-10年/本科</p>
                            <p class="clearFixed pBor">
                                <span class="btn fl spa">软件服务</span>
                                <span class="btn fl spa">数据服务</span>
                            </p>
                            <div class="imgBox clearFixed">
                                <img class="fl" src="./img/bzy.png" alt="">
                                <div class="imgText fl">
                                    <p class="text1">八爪鱼</p>
                                    <p class="text2">数据服务/咨询/深圳</p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="clearFixed">
                        <div class="conBox fl">
                            <p class="job clearFixed ">
                                <span class="jobText fl">前端工程师</span>
                                <span class="time btn fl">[10:21发布]</span>
                                <span class="salary fr">12-20k</span>
                            </p>
                            <p class="btn btn2">经验3-5年/不限</p>
                            <p class="clearFixed pBor">
                                <span class="btn fl spa">软件服务</span>
                                <span class="btn fl spa">教育</span>
                            </p>
                            <div class="imgBox clearFixed">
                                <img class="fl" src="./img/ydz.jpg" alt="">
                                <div class="imgText fl">
                                    <p class="text1">有德者</p>
                                    <p class="text2">IT技术服务/微融资/深圳</p>
                                </div>
                            </div>
                        </div>
                        <div class="conBox fl">
                            <p class="job clearFixed ">
                                <span class="jobText fl">web前端</span>
                                <span class="time btn fl">[10:21发布]</span>
                                <span class="salary fr">11-20k</span>
                            </p>
                            <p class="btn btn2">经验3-5/不限</p>
                            <p class="clearFixed pBor">
                                <span class="btn fl spa">IT技术</span>
                                <span class="btn fl spa">互联网</span>
                            </p>
                            <div class="imgBox clearFixed">
                                <img class="fl" src="./img/bykj.png" alt="">
                                <div class="imgText fl">
                                    <p class="text1">博阅科技</p>
                                    <p class="text2">IT技术服务/不需要融资/深圳</p>
                                </div>
                            </div>
                        </div>
                        <div class="conBox fl">
                            <p class="job clearFixed">
                                <span class="jobText fl">web前端工程师</span>
                                <span class="time btn fl">[10:21发布]</span>
                                <span class="salary fr">9-18k</span>
                            </p>
                            <p class="btn btn2">经验5-10年/不限</p>
                            <p class="clearFixed pBor">
                                <span class="btn fl spa">软件服务</span>
                                <span class="btn fl spa">IT技术</span>
                            </p>
                            <div class="imgBox clearFixed">
                                <img class="fl" src="./img/bxxx.jpg" alt="">
                                <div class="imgText fl">
                                    <p class="text1">变向信息</p>
                                    <p class="text2">IT技术服务/咨询/深圳</p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="clearFixed">
                        <div class="conBox fl">
                            <p class="job clearFixed ">
                                <span class="jobText fl">前端开发工程师</span>
                                <span class="time btn fl">[10:21发布]</span>
                                <span class="salary fr">13-22k</span>
                            </p>
                            <p class="btn btn2">经验1-3年/不限</p>
                            <p class="clearFixed pBor">
                                <span class="btn fl spa">软件服务</span>
                                <span class="btn fl spa">科技金融</span>
                            </p>
                            <div class="imgBox clearFixed">
                                <img class="fl" src="./img/sdxx.png" alt="">
                                <div class="imgText fl">
                                    <p class="text1">思迪信息</p>
                                    <p class="text2">软件服务/咨询/深圳</p>
                                </div>
                            </div>
                        </div>
                        <div class="conBox fl">
                            <p class="job clearFixed ">
                                <span class="jobText fl">web前端开发</span>
                                <span class="time btn fl">[10:21发布]</span>
                                <span class="salary fr">10-20k</span>
                            </p>
                            <p class="btn btn2">经验3-5年/不限</p>
                            <p class="clearFixed pBor">
                                <span class="btn fl spa">HTML5</span>
                                <span class="btn fl spa">Vue</span>
                            </p>
                            <div class="imgBox clearFixed">
                                <img class="fl" src="./img/wghlkj.png" alt="">
                                <div class="imgText fl">
                                    <p class="text1">微观互联科技</p>
                                    <p class="text2">社交平台/A轮/深圳</p>
                                </div>
                            </div>
                        </div>
                        <div class="conBox fl">
                            <p class="job clearFixed">
                                <span class="jobText fl">前端开发</span>
                                <span class="time btn fl">[10:21发布]</span>
                                <span class="salary fr">15-30k</span>
                            </p>
                            <p class="btn btn2">经验5-10年/不限</p>
                            <p class="clearFixed pBor">
                                <span class="btn fl spa">电商平台 </span>
                                <span class="btn fl spa">互联网</span>
                            </p>
                            <div class="imgBox clearFixed">
                                <img class="fl" src="./img/lx.jpg" alt="">
                                <div class="imgText fl">
                                    <p class="text1">乐信</p>
                                    <p class="text2">科技金融/上市公司/深圳</p>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <p class="more">查看更多</p>
            <div class="line2">
                <div class="lineTop">
                    <div class="top1">
                        <a href="" class="hot">互联网热门公司</a>
                    </div>
                    <div class="top2">
                        <span class="fl">?</span>
                        <a href="" class="fl">互联网行业实力热门企业</a>
                        <a href="" class="fl">我知道了</a>
                    </div>
                </div>
                <div class="con2Box clearFixed">
                    <div class="listBox fl">
                        <img src="./img/yx.png" alt="">
                        <span class="spa1">宇信科技</span>
                        <p class="text1">IT技术服务|咨询</p>
                        <p class="text2">有朋自远方来，不亦乐乎。学而时习之,不亦乐乎。温故而知新</p>
                        <div class="listCon clearFixed">
                            <div class="box1 fl">
                                <p>20</p>
                                面试评价
                            </div>
                            <div class="box1 fl">
                                <p>4</p>
                                在招职位
                            </div>
                            <div class="box1 fl">
                                <p>100%</p>
                                简历处理率
                            </div>
                        </div>
                    </div>
                    <div class="listBox fl">
                        <img src="./img/ys.jpg" alt="">
                        <span class="spa1">一搜</span>
                        <p class="text1">游戏，内容社区/D轮</p>
                        <p class="text2">六险一金 双休 年终奖有朋自远方来，不亦乐乎.学而时习之,不亦乐乎。温故而知新</p>
                        <div class="listCon clearFixed">
                            <div class="box1 fl">
                                <p>23</p>
                                面试评价
                            </div>
                            <div class="box1 fl">
                                <p>20</p>
                                在招职位
                            </div>
                            <div class="box1 fl">
                                <p>81%</p>
                                简历处理
                            </div>
                        </div>
                    </div>
                    <div class="listBox fl">
                        <img src="./img/mg.png" alt="">
                        <span class="spa1">麦谷科技</span>
                        <p class="text1">数据服务|咨询/A轮</p>
                        <p class="text2">有朋自远方来，不亦乐乎.学而时习之,不亦乐乎。温故而知新</p>
                        <div class="listCon clearFixed">
                            <div class="box1 fl">
                                <p>6</p>
                                面试评价
                            </div>
                            <div class="box1 fl">
                                <p>3</p>
                                在招职位
                            </div>
                            <div class="box1 fl">
                                <p>100%</p>
                                简历处理率
                            </div>
                        </div>
                    </div>
                    <div class="listBox fl">
                        <img src="./img/zyyx.png" alt="">
                        <span class="spa1">掌阅游戏</span>
                        <p class="text1">游戏/不需要融资</p>
                        <p class="text2">开放平等，管理扁平有朋自远方来，不亦乐乎.学而时习之,不亦乐乎。温故而知新</p>
                        <div class="listCon clearFixed">
                            <div class="box1 fl">
                                <p>14</p>
                                面试评价
                            </div>
                            <div class="box1 fl">
                                <p>12</p>
                                在招职位
                            </div>
                            <div class="box1 fl">
                                <p>100%</p>
                                简历处理率
                            </div>
                        </div>
                    </div>
                </div>
                <div class="con2Box clearFixed">
                    <div class="listBox fl">
                        <img src="./img/qa.png" alt="">
                        <span class="spa1">QA</span>
                        <p class="text1">移动互联网，游戏</p>
                        <p class="text2">专业的二尺元游戏平台有朋自远方来，不亦乐乎.学而时习之,不亦乐乎。温故而知新</p>
                        <div class="listCon clearFixed">
                            <div class="box1 fl">
                                <p>45</p>
                                面试评价
                            </div>
                            <div class="box1 fl">
                                <p>5</p>
                                在招职位
                            </div>
                            <div class="box1 fl">
                                <p>100%</p>
                                简历处理率
                            </div>
                        </div>
                    </div>
                    <div class="listBox fl">
                        <img src="./img/yzrkj.jpg" alt="">
                        <span class="spa1">源中瑞科技</span>
                        <p class="text1">移动互联网，电商</p>
                        <p class="text2">诚信为本，服务至上，有朋自远方来，不亦乐乎.学而时习之,不亦乐乎。温故而知新</p>
                        <div class="listCon clearFixed">
                            <div class="box1 fl">
                                <p>17</p>
                                面试评价
                            </div>
                            <div class="box1 fl">
                                <p>16</p>
                                在招职位
                            </div>
                            <div class="box1 fl">
                                <p>85%</p>
                                简历处理率
                            </div>
                        </div>
                    </div>
                    <div class="listBox fl">
                        <img src="./img/alwl.png" alt="">
                        <span class="spa1">艾拉物联</span>
                        <p class="text1">物联网，数据服务</p>
                        <p class="text2">有朋自远方来，不亦乐乎.学而时习之,不亦乐乎。温故而知新</p>
                        <div class="listCon clearFixed">
                            <div class="box1 fl">
                                <p>5</p>
                                面试评价
                            </div>
                            <div class="box1 fl">
                                <p>10</p>
                                在招职位
                            </div>
                            <div class="box1 fl">
                                <p>100%</p>
                                简历处理率
                            </div>
                        </div>
                    </div>
                    <div class="listBox fl">
                        <img src="./img/byb.png" alt="">
                        <span class="spa1">比一比</span>
                        <p class="text1">人工智能，数据服务</p>
                        <p class="text2">有朋自远方来，不亦乐乎.学而时习之,不亦乐乎。温故而知新</p>
                        <div class="listCon clearFixed">
                            <div class="box1 fl">
                                <p>28</p>
                                面试评价
                            </div>
                            <div class="box1 fl">
                                <p>14</p>
                                在招职位
                            </div>
                            <div class="box1 fl">
                                <p>100%</p>
                                简历处理率
                            </div>
                        </div>
                    </div>
                </div>
                <p class="more">查看更多</p>
            </div>
            <div class="line3">
                <div class="lineTop">
                    <div class="top1">
                        <a href="" class="hot">友情链接</a>
                    </div>
                    <div class="btnCon">
                        <a href="">拉勾网</a>
                        <a href="">教师网</a>
                        <a href="">深圳人才网</a>
                        <a href="">上海人才网</a>
                        <a href="">北京人才网</a>
                        <a href="">广州人才网</a>
                        <a href="">贵阳人才网</a>
                        <a href="">重庆人才网</a>
                        <a href="">南宁人才网</a>
                        <a href="">天津人才网</a>
                        <a href="">杭州人才网</a>
                        <p class=" openText fr">展开</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部 -->
        <div class="footer">
            <div class="fooTop main clearFixed">
                <div class="appBox fl">
                    <p class="btnApp">下载拉勾app</p>
                    <p class="btnApp">微信小程序</p>
                    <p class="btnText">
                        <span>拉勾微信</span>
                        <span>拉勾微博</span>
                    </p>
                </div>
                <dl class="fl">
                    <dt>企业服务</dt>
                    <dd>招聘抢人宝典</dd>
                    <dd>公司搜索</dd>
                    <dd>拉勾APP</dd>
                </dl>
                <dl class="fl dlCen">
                    <dt>用户帮助</dt>
                    <dd>帮助中心</dd>
                    <dd>用户服务协议</dd>
                    <dd>隐私政策</dd>
                    <dd>在线提问</dd>
                </dl>
                <dl class="fl">
                    <dt>企业服务联系方式</dt>
                    <dd>服务热线：4231 6548 12(9:00-18:00)</dd>
                    <dd>企业邮箱：gadfdafikuo@123.com</dd>
                    <dd>不要联系我</dd>
                </dl>
            </div>
            <div class="fooButtom">
                <div class="bottCon main clearFixed">
                    <p class="textP4"><img src="./img/logo.png" alt=""></p>
                    <p class="textP1 fl">&copy2022 拉勾网 京ICP备14023790号-2</p>
                    <p class="textP2 fl">人力资源服务许可证 </p>
                    <p class="textP3 fl">增值电信业务经营许可证</p>
                    <p class="textP3 fl">投诉点这里</p>

                </div>
            </div>
        </div>
    </div>
    <button id="test"><img src="./img/top.jpg" alt="">
    </button>

</body>

</html>

<script>
    // 轮播图
    var mySwiper = new Swiper('.swiper-container', {
        loop: true,       // 循环模式选项
        autoplay: {       //自动切换
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        },

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
    // 回到顶部
    test.onclick = function () {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    };
    // 页面向下滚动后显示回到顶部图标
    window.onscroll = function () {
        if (document.documentElement.scrollTop + document
            .body.scrollTop > 100) {
            document.getElementById('test').style.display = 'block';
        }
        else {
            document.getElementById('test').style.display = "none";
        };

        // 滚动到一定距离固搜索框
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        let sear = document.getElementById('sear');
        let searchList = document.getElementById('searchList')
        let searCon = document.getElementById('searCon')
        if (scrollTop > 121.45) {
            sear.style.position = 'fixed';
            sear.style.top = '38px';
            sear.style.width = '100%';
            sear.style.zIndex = '5';
            sear.style.height = '60px';
            sear.style.paddingTop = '10px';
            searchList.style.display = 'none';
            searCon.style.paddingTop = '0'
        } else {
            sear.style.position = 'static';
            searchList.style.display = 'block';
            sear.style.height = '120px';
        };
    };
</script>